<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }
        
        .yellow {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="box">
        <div v-bind:class="color">1111111111111</div>
        <!-- 加上v-bind后的class会根据下面的值变化，否则class只会是color,不会变化 -->
        <!-- 也支持三元运算 -->
        <div v-bind:class="isLogin ? 'red' : 'yellow'">22222222222</div>
        <!-- 简写 -->
        <div :class="isLogin ? 'red' : 'yellow'">3333333333333</div>

        <img :src="url" alt="" width="300">
        <!-- 可以绑定多个属性 -->

        <img :src="url" alt="" :width="300">

        <!--此时可以这样写：绑定对象 -->
        <img v-bind="imgObj">
        <button :disabled="isdisabled">click</button>
        <script>
            var obj = {
                data() {
                    return {

                        isLogin: false,
                        color: "red",
                        url: "https://t7.baidu.com/it/u=2984822884,629429889&fm=193&f=GIF",
                        isdisabled: true,
                        imgObj: {
                            src: "https://t7.baidu.com/it/u=2984822884,629429889&fm=193&f=GIF",
                            width: "300"

                        }
                    }
                }
            }

            var app = Vue.createApp(obj).mount('#box')

            // 操作app就可以动态设置,如：
            // app.isLogin = true
            // app.color = "yellow"
            // app.url = "https://t7.baidu.com/it/u=2984822884,629429889&fm=193&f=GIF"
        </script>
</body>

</html>